@import "../../variable.less";
.@{prefix} {
  &-loading {
    font-size: var(--font-size-base);
    color: var(--primary-color);
    text-align: center;
    vertical-align: middle;
    opacity: 0;
    transition: transform 0.2s;
    &-loading {
      display: inline-block;
      opacity: 1;
      position: static;
    }
    &-dot {
      position: relative;
      display: inline-block;
      width: 1em;
      height: 1em;
      font-size: 20px;
      transform: rotate(45deg);
      animation: meRotate 1.2s infinite linear;
      &-item {
        position: absolute;
        display: block;
        width: 9px;
        height: 9px;
        background-color: var(--primary-color);
        transform: scale(0.75);
        border-radius: 100%;
        transform-origin: center center;
        opacity: 0.3;
        animation: loadingMove 1s infinite linear alternate;
        &:nth-child(1) {
          top: 0;
          left: 0;
        }
        &:nth-child(2) {
          top: 0;
          right: 0;
          animation-delay: .4s;
        }
        &:nth-child(3) {
          bottom: 0;
          right: 0;
          animation-delay: .8s;
        }
        &:nth-child(4) {
          bottom: 0;
          left: 0;
          animation-delay: 1.2s;
        }
      }
      @keyframes loadingMove {
        100% {
          opacity: 1;
        }
      }
      @keyframes meRotate {
        100% {
          transform: rotate(405deg);
        }
      }
    }
    &-nested-text {
      position: relative;
      .me-loading {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        display: block;
        width: 100%;
        height: 100%;
        .me-loading-dot {
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -10px;
          margin-top: -20px;
        }
        .me-loading-tip {
          position: absolute;
          top: 50%;
          width: 100%;
        }
      }
    }
    &-container {
      position: relative;
      transition: opacity 0.3s;
    }
    &-blur {
      user-select: none;
      opacity: 0.5;
      clear: both;
    }
  }
}